<template>
	<div class="wrap">
		<div class="header_nav">
			<div>

			</div>
			<div class="nav_right">
				<!-- <div>
					admin
				</div>
				<div>
					Logout
				</div> -->
				<div>
					<div @click="out">
						退出
					</div>
					<van-icon name="cart-o" size="25px" style="margin-left: -50px;margin-top: 10px;" :badge="this.$store.state.cartList.length"
					 @click="goto" />
				</div>
			</div>
		</div>

		<div class="wrap_content">
			<div class="shows">
				<el-dropdown>
					<span class="el-dropdown-link">
						筛选
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,index) in leftList" :key="index">{{item.title}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="right">
				<span>
					Sort by:
				</span>
				<span>
					Default
				</span>
				<span @click="sortup" :class="{'aa':paixu == 1}">
					Price
				</span>
				<span class="span_madie">
					FILTER BY
				</span>
			</div>
		</div>
		<el-container>

		</el-container>
		<div class="wrap_center">
			<el-row :gutter="10">
				<el-col :xs="0" :sm="5" :md="5">
					<div class="wrap_center_left">
						<ul class="wrap_center_left_ul" v-for="(item,index) in leftList" :key="index">
							<li @click="a(index)">{{item.title}}</li>
						</ul>
					</div>
				</el-col>
				<el-col :xs="24" :sm="19" :md="19">
					<div class="wrap_center_right">
						<div class="wrap_center_right_box" ref="onscrolls">
							<el-row :gutter="10">
								<el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in cardList" :key="index">
									<div class="wraps_box">
										<img :src="item.productImage">
										<h5>{{item.productName}}</h5>
										<div style="color: red;">
											￥{{item.salePrice}}
										</div>
										<div class="gotoCar" @click="add(item)">
											加入购物车
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
				<div class="load" v-show="isShow">
					<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2228985605,2720940451&fm=26&gp=0.jpg" />
				</div>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeNames: ["1"],
				isShow: false,
				leftList: [],
				cardList: [],
				paixu: 1
			};
		},
		methods: {
			a(index) {
				if (index == 0) {
					console.log("这是All")
					this.$axios.get('http://localhost:8080/data.json').then(res => {
						this.leftList = res.data.result.slider
					})
				} else if (index == 1) {
					console.log("0-100元")
					this.$axios.get('/data.json').then(res => {
						this.list.map(item => {
							if (item.salePrice.includes(0 < item.salePrice < 100)) {
								this.cardList.push(item)
							}
						})
					})
				} else if (index == 2) {
					console.log("100-500元")
					this.$axios.get('/data.json').then(res => {
						this.list.map(item => {
							if (item.salePrice.includes(100 < item.salePrice < 500)) {
								this.cardList.push(item)
							}
						})
					})
				} else if (index == 3) {
					console.log("500-1000元")
					this.$axios.get('/data.json').then(res => {
						this.list.map(item => {
							if (item.salePrice.includes(500 < item.salePrice < 1000)) {
								this.cardList.push(item)
							}
						})
					})
				} else if (index == 4) {
					console.log("1000-2000元")
					this.$axios.get('/data.json').then(res => {
						this.list.map(item => {
							if (item.salePrice.includes(1000 < item.salePrice < 2000)) {
								this.cardList.push(item)
							}
						})
					})
				}
			},
			add(goods) {
				if (this.token == '') {
					return
				} else {
					this.$store.commit("addCart", goods)
				}
			},
			goto() {
				this.$router.push({
					path: 'Cars'
				})
			},
			sortup() {
				if (this.paixu == 1) {
					this.paixu = 2;
					this.cardList.sort((a, b) => {
						return b.salePrice - a.salePrice
					})
				} else if (this.paixu == 2) {
					this.paixu = 1;
					this.cardList.sort((a, b) => {
						return a.salePrice - b.salePrice
					})
				}
			},
			out() {
				localStorage.removeItem("token")
			}
		},
		mounted() {
			this.$refs.onscrolls.addEventListener("scroll", (e) => {
				console.log("滚动距离" + e.target.scrollTop);
				console.log("总高度" + e.target.scrollHeight);
				console.log("可视区域高度" + e.target.clientHeight);
				if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop === 0) {
					this.isShow = true;
					setTimeout(() => {
						this.isShow = false;
					}, 2000);
				}
			});

			this.$axios.get('http://localhost:8080/data.json').then(res => {
				this.cardList = res.data.result.list
				this.leftList = res.data.result.slider
				var List = [...cardList, res.data.result.list]
			})
		},
	};
</script>

<style scoped>
	.header_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.right {
		display: flex;
		align-items: center;
		float: right;
	}

	.right span {
		margin-left: 15px;
	}

	.span_madie {
		display: none;
	}

	.wrap_center_left_ul {
		margin-left: 50px;
	}

	.wrap_center_left_ul li {
		margin-top: 30px;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409eff;
	}

	.wraps_box {
		width: 80%;
		height: 300px;
	}

	.wraps_box img {
		width: 60%;
		height: 60%;
		margin-left: 50px;
	}

	.gotoCar {
		display: flex;
		width: 90%;
		height: 30px;
		margin-left: 10px;
		margin-top: -3px;
		justify-content: center;
		align-items: center;
		color: red;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.shows {
		display: none;
	}

	.header_nav {
		width: 100%;
		height: 10vh;
	}

	.wrap_content {
		width: 100%;
		height: 8vh;
	}

	.wrap_center {
		width: 100%;
		height: 82vh;
	}

	.wrap_center_left {
		height: 82vh;
	}

	.wrap_center_right {
		height: 82vh;
		overflow: hidden;
		overflow: scroll;
	}

	@media screen and (max-width: 765px) {
		.shows {
			display: block;
		}

		.right {
			display: none;
		}

		.span_madie {
			display: block;
		}

		.wraps_box {
			width: 100%;
			height: 90px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.wraps_box img {
			width: 60px;
			height: 60px;
		}

		.gotoCar {
			width: 15vw;
			height: 8vh;
			font-size: 14px;
		}
	}

	.wrap_center_right_box {
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

	.load {
		width: 80px;
		height: 80px;
		margin: 0 auto;
	}

	.load img {
		width: 100%;
		height: 100%;
	}

	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #e9eef3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
